<template>
  <div class="detroy_class">
    <el-dialog :title="isResetDestroy ? '撤销销课' : '销课'" :visible.sync="visible" @close="handleClose">
      <div class="leave_cont">
        <el-row>
          <el-col>
            <span v-if="isResetDestroy">撤销销课学员：{{resetStudent.name}}</span>
            <p v-else><span class="color_blue">{{getStudensList}}</span><span v-if="this.selectStudents.length > 5">等</span>{{this.selectStudents.length}}名学员将销所勾选的课时</p>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">{{isResetDestroy ? '请选择要撤销的销课:' : '请选择销课课时:'}}</el-col>
        </el-row>
        <el-row v-if="!isResetDestroy">
          <el-col :span="24">
            <el-date-picker
              v-model="selectMonth"
              format="yyyy 年 MM 月" 
              :clearable="false"
              type="month"
              :picker-options="pickerOptions"
              placeholder="请选择销课月份" class="month_select" @change="HandleSelectedMonth">
            </el-date-picker>
          </el-col>
        </el-row>
        <!--销课-->
        <el-row v-if="!isResetDestroy">
          <el-col :span="24" v-if="classList.length == 0">暂无可销课课时</el-col> 
          <el-col :span="24" v-else>
            <el-scrollbar class="import_table" wrap-class="makeup-scroll">
              <el-checkbox-group v-model="checkList">
                <el-checkbox v-for="(item, index) in classList" :key="index" :label="item.scheduleId" :disabled="item.status != 0">
                  <span>{{new Date(item.beginClassDate).format('yyyy-MM-dd')}} {{item.weekCode | getWeekDay}} {{new Date(item.beginTime).format('hh:mm')}}-{{new Date(item.endTime).format('hh:mm')}} {{item.teacherName}}</span><span v-if="item.status == 2">（{{item.statusDesc}}）</span>
                </el-checkbox>
              </el-checkbox-group>
            </el-scrollbar>
            已选课时：{{checkList.length}}
          </el-col>
        </el-row>
        <!--撤销销课-->
        <el-row v-else>
          <el-col :span="24" v-if="classList.length == 0">暂无可撤销销课课时</el-col> 
          <el-col :span="24" v-else>
            <el-scrollbar class="import_table" wrap-class="makeup-scroll">
              <el-checkbox-group v-model="checkList">
                <el-checkbox v-for="(item, index) in classList" :key="index" :label="item.id" :disabled="item.comment">
                  <span>{{new Date(item.beginDate).format('yyyy-MM-dd')}} {{item.beginWeekCode | getWeekDay}} {{new Date(item.startTime).format('hh:mm')}}-{{new Date(item.endTime).format('hh:mm')}}</span>
                  <span class="operator" :title="item.signinerName">销课人：{{item.signinerName}}</span>
                  <span v-if="item.comment">(已点评，不可撤销)</span>
                </el-checkbox>
              </el-checkbox-group>
            </el-scrollbar>
            已选课时：{{checkList.length}}
          </el-col>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSubmit" :disabled="checkList.length == 0">确 定</el-button>
        <el-button @click="handleClose">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TrainApi from 'api/train'
export default {
  props: {
    isDestroy: { // 弹出层显示隐藏
      default: false
    },
    selectStudents: { // 批量销课学员
      selectStudents: []
    },
    classData: { // 班级信息用于获取上课周期数据
      default: {}
    },
    isResetDestroy: { // 销课 false 撤销销课 true
      defalut: false
    },
    resetStudent: { // 撤销销课学员
      defalut: {}
    }
  },
  computed: {
    getStudensList: function () { // 获取要展示的学员，前5个
      let newArray = []
      this.selectStudents.forEach((item, index) => {
        if (index < 5) {
          newArray.push(item.name)
        }
      })
      return newArray.join('、')
    }
  },
  mounted () {
    if (!this.isResetDestroy) { // 销课
      this.handleTimeParams(this.selectMonth)
    } else { // 撤销销课
      this.handleSameConsumed()
    }
  },
  data () {
    let scope = this
    return {
      pickerOptions: { // 所选时间在上课周期范围之内
        disabledDate (time) {
          return time.getTime() < new Date(scope.classData.beginTime) || time.getTime() > new Date(scope.classData.endTime)
        }
      },
      visible: this.isDestroy,
      selectMonth: new Date(),
      checkList: [],
      classList: []
    }
  },
  methods: {
    HandleSelectedMonth (value) { // 时间选择
      let tiemParams = new Date(new Date(new Date().setYear(value.split('年')[0])).setMonth(value.split('年')[1].split('月')[0] - 1))
      this.handleTimeParams(tiemParams)
    },
    handleTimeParams (dateTime) {
      let startMonthTime = dateTime.setDate(1) // 某月的第一天
      let endMonth = new Date()
      endMonth.setMonth(dateTime.getMonth() + 1)
      endMonth.setDate(0)
      let endMonthTime = endMonth.getTime() // 某月的最后一天
      TrainApi.sameClassnotConsumed({
        classId: this.$route.query.id,
        beginDate: startMonthTime,
        endDate: endMonthTime
      }).then((res) => {
        this.classList = res.data
      })
    },
    handleSameConsumed () { // 学员撤销销课
      TrainApi.sameClassConsumed({
        classId: this.$route.query.id,
        studentId: this.resetStudent.studentId
      }).then((res) => {
        this.classList = res.data
      })
    },
    handleSubmit () { // 提交表单
      if (!this.isResetDestroy) { // 批量销课
        let studentsId = []
        studentsId = this.selectStudents.map((item, index) => {
          return item.studentId
        })
        TrainApi.sameConsume({
          studentIds: studentsId,
          classScheduleIds: this.checkList
        }, {content: this, successMsg: '销课成功'}).then((res) => {
          if (res.data && res.data.length > 0) {
            const h = this.$createElement
            this.$msgbox({
              title: '注 意',
              message: h('p', null, [
                h('span', { style: 'color: #3983e5' }, res.data.join('、')),
                h('span', null, '有请假，相关课时未销课成功 ')
              ]),
              confirmButtonText: '我知道了'
            }).catch(() => {
              return false
            })
          }
          this.handleClose()
        })
      } else { // 撤销销课
        TrainApi.sameCancelConsume({
          scheduleIds: this.checkList
        }, {content: this, successMsg: '撤销销课成功'}).then((res) => {
          this.handleClose()
        })
      }
    },
    handleClose () { // 关闭弹出层
      this.visible = false
      this.$emit('closeDestroy')
    }
  }
}
</script>

<style lang="scss">
.detroy_class{
  .el-dialog--small{
    width: 600px;
  }
  .color_blue{
    color:#3983e5;
  }
  .month_select{
    margin:12px 0;
  }
  .el-col{
    line-height: 2;
  }
  .el-checkbox-group {
    width: 100%;
    .el-checkbox{
      width: 90%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .makeup-scroll{
    max-height: 370px;
    overflow-y: scroll;
  }
}
</style>
